<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .chat,
        .chat * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .chat {
            width: 1360px;
            height: 660px;
            padding: 30px;
            margin: 50px auto;
        }

        .chat > div {
            width: 600px;
            height: 600px;
            float: left;
        }

        .chat .left {
            margin-right: 100px;
        }

        .chat .recordbox {
            height: 500px;
            border: 1px solid #cccccc;
            background: #fff;
            overflow-y: auto;
        }

        .chat input {
            height: 50px;
            width: 400px;
            margin: 25px;
            border: 1px solid #cccccc;
            line-height: 50px;
            text-indent: 15px;
            font-size: 16px;
        }

        .chat button {
            height: 50px;
            width: 125px;
            margin: 25px 0;
            border: none;
            background-color: #ccc;
            border-radius: 10px;
        }

        .chat button:hover {
            cursor: pointer;
            background-color: #bbb;
        }

        .chat .recordbox > div {
            padding: 0 20px;
            overflow: auto;
        }

        .chat .recordbox span {
            margin: 10px 0;
            min-height: 30px;
            max-width: 300px;
            line-height: 30px;
            padding: 5px 10px;
            border-radius: 10px;
            display: block;
            background-color: #ccc;
        }

        .chat .imgbox {
            margin: 10px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        .chat .leftrecord .imgbox {
            float: left;
            left: 0;
        }

        .chat .rightrecord .imgbox {
            float: right;
            right: 0;
        }

        .chat .imgbox img {
            height: 40px;
            width: 40px;
        }

        .chat .leftrecord span {
            float: left;
        }

        .chat .rightrecord span {
            float: right;
        }

        .chat .hint {
            min-height: 18px;
            line-height: 18px;
            padding: 0 100px;
            color: #aaa;
            text-align: center;
            font-size: 14px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
<div class="chat">
    <div class="left">
        <div class="recordbox"></div>
        <div class="send">
            <label>
                <input type="text">
            </label>
            <button>发送</button>
        </div>
    </div>
    <div class="right">
        <div class="recordbox"></div>
        <div class="send">
            <label>
                <input type="text">
            </label>
            <button>发送</button>
        </div>
    </div>
</div>
</body>
<script>
    window.onload = function () {
        let left = document.querySelector(".chat .left .recordbox");
        let right = document.querySelector(".chat .right .recordbox");
        let leftState;
        let rightState;

        function leftSend(is) {
            let str = document.querySelector(".chat .left input").value;
            document.querySelector(".chat .left input").value = '';
            if (!str)
                return;
            left.innerHTML += "<div class='rightrecord'><div class='imgbox'><img src='image/jack.png' alt=''></div><span>" + str + "</span></div>";
            right.innerHTML += "<div class='leftrecord'><div class='imgbox'><img src='image/jack.png' alt=''></div><span>" + str + "</span></div>";
            clearTimeout(leftState);
            if (is)
                leftReady();
        }

        function rightSend(is) {
            let str = document.querySelector(".chat .right input").value;
            document.querySelector(".chat .right input").value = '';
            if (!str)
                return;
            left.innerHTML += "<div class='leftrecord'><div class='imgbox'><img src='image/rose.png' alt=''></div><span>" + str + "</span></div>";
            right.innerHTML += "<div class='rightrecord'><div class='imgbox'><img src='image/rose.png' alt=''></div><span>" + str + "</span></div>";
            clearTimeout(rightState);
            if (is)
                rightReady();
        }

        function leftReady() {
            leftState = setTimeout(function () {
                if (leftState)
                    right.innerHTML += "<div class='hint'>Jack 正在输入...</div>";
            }, 3000);
        }

        function rightReady() {
            rightState = setTimeout(function () {
                if (rightState)
                    left.innerHTML += "<div class='hint'>Rose 正在输入...</div>";
            }, 3000);
        }

        // 点击发送
        document.querySelector(".chat .left button").onclick = function () {
            leftSend(false);
        };
        document.querySelector(".chat .right button").onclick = function () {
            rightSend(false);
        };
        // 回车发送
        document.querySelector(".chat .left input").onkeypress = function (event) {
            if (parseInt(event.keyCode) === 13)
                leftSend(true);
        };
        document.querySelector(".chat .right input").onkeypress = function (event) {
            if (parseInt(event.keyCode) === 13)
                rightSend(true);
        };
        // 焦点显示正在输入
        document.querySelector(".chat .left input").onfocus = function () {
            leftReady();
        };
        document.querySelector(".chat .right input").onfocus = function () {
            rightReady();
        };
        // 取消正在输入
        document.querySelector(".chat .left input").onblur = function () {
            clearTimeout(leftState);
        };
        document.querySelector(".chat .right input").onblur = function () {
            clearTimeout(rightState);
        }
    }
</script>

</html>